<%--
  Created by IntelliJ IDEA.
  User: 磊布斯
  Date: 2021/10/16
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%--<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>--%>
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>


<script type="text/javascript">
    /* $(document).ready(function(){
         alert(1);
     })*/
</script>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
</head>
<body>
<!-- 添加员工模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加员工</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                            <span class="help-block">
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@qq.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="M"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-10">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="dId" id="dept_add_select">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改员工模态框 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">添加修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                            <span class="help-block">
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">email</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@qq.com">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="M"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">deptName</label>
                        <div class="col-sm-10">
                            <!-- 部门提交部门id即可 -->
                            <select class="form-control" name="dId" id="dept_update_select">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <!--标题-->
    <div class="row">
        <div class="col-md-12"><h1>SSM-CRUD</h1></div>
    </div>
    <!--按钮-->
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary" id="emp_add_model_btn">
                <span class="" aria-hidden="true">新增</span>
            </button>
            <button class="btn btn-danger">
                <span class="">删除</span>
            </button>
        </div>
    </div>
    <%--显示表格数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptname</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <%--显示分页信息--%>
    <div class="row">
        <%--分页文字信息--%>
        <div class="col-md-6" id="page_info_area">

        </div>
        <%--分页条信息--%>
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>
</div>
<script type="text/javascript">
<%-- 页面加载完毕后,发送ajax请求,拿到分页数据--%>
    $(function() {
        $.ajax({
            url:"/emps",
            data:"pn=1",
            type:"get",
            success:function (result) {
            //    1.解析并显示员工数据
                build_emps_table(result);
                build_page_info(result);
                //    3.解析并显示分页数据
                build_page_nav(result)
            }
        });
    })
//  员工数据
    function build_emps_table(result) {
        //清空表格
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps,function (index,item) {
            //alert(item,empName);
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(
                item.gender == 'M' ? "男" : "女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>")
                .append(item.department.deptName);
            var editBtn = $("<button></button>").addClass(
                "btn btn-primary btn-sm edit_btn").append(
                $("<span></span>").addClass(
                    "glyphicon glyphicon-pencil")).append("编辑");
            editBtn.attr("edit_id",item.empId);
            var delBtn = $("<button></button>").addClass(
                "btn btn-danger btn-sm").append(
                $("<span></span>")
                    .addClass("glyphicon glyphicon-trash")).append(
                "删除");

            var btnTd = $("<td></td>").append(editBtn).append(delBtn);
            $("<tr></tr>").append(empIdTd).append(empNameTd).append(
                genderTd).append(emailTd).append(deptNameTd).append(
                btnTd).appendTo("#emps_table tbody");
        })
    }

//    解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        $("#page_info_area")
        .append("当前第"+result.extend.pageInfo.pageNum+
        "页,总共"+result.extend.pageInfo.pages+"页,总共"
        +result.extend.pageInfo.total+"条记录");
    }

//解析显示分页条
function build_page_nav(result){
    $("#page_nav_area").empty();
    var ul = $("<ul></ul>" ).addClass("pagination");
    var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
    if (result.extend.pageInfo.hasPreviousPage===false){
        firstPageLi.addClass("disabled");
        prePageLi.addClass("disabled");
    }else {
        prePageLi.click(function (){
            to_page(result.extend.pageInfo.pageNum-1);
        });
        firstPageLi.click(function (){
            to_page(1);
        });
    }
    var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
    var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
    if (result.extend.pageInfo.hasNextPage===false){
        nextPageLi.addClass("disabled");
        lastPageLi.addClass("disabled");
    }else {
        nextPageLi.click(function (){
            to_page(result.extend.pageInfo.pageNum+1);
        });
        lastPageLi.click(function (){
            to_page(result.extend.pageInfo.pages);
        });
    }

    ul.append(firstPageLi).append(prePageLi);
    //result.extend.pageInfo.navigatepageNums 为什么是这样子，看返回的json数据类型就可以了
    $.each(result.extend.pageInfo.navigatepageNums,function (index,item){
        var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
        if (result.extend.pageInfo.pageNum===item){
            numLi.addClass("active");
        }
        numLi.click(function (){
            to_page(item);
        });
        ul.append(numLi);
    });
    ul.append(nextPageLi).append(lastPageLi);
    //把ul添加到nav
    var navEle=$("<nav></nav>").append(ul);
    navEle.appendTo("#page_nav_area");
}
//点击新增,弹出模态框
$("#emp_add_model_btn").click(function () {
    //发送ajax请求,查出部门信息,显示在下拉列表中
    getDepts();
    $("#empAddModal").modal({
        backdrop:"static"
    });
});

function to_page(pn) {
    $.ajax({
        url:"/emps",
        data:"pn="+pn,
        type:"GET",
        success:function (result) {
            //1.解析并显示员工数据
            build_emps_table(result);
            build_page_info(result);
            //2.解析并显示分页数据
            build_page_nav(result)
        }
    });
}
//查出所有的部门信息,并显示在下拉列表
    function getDepts() {
        $.ajax({
            url:"/depts",
            type:"GET",
            success:function (result) {
                // console.log(result);
                // 显示部门信息到下拉列表
                $.each(result.extend.depts,function () {
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo($("#dept_add_select"));
                });
            }
        })
    }
    //跟input绑定change事件
    $("#empName_add_input").change(function () {
        //发送ajax请求校验用户名是否可用
        var empName = this.value;
        $.ajax({
            url:"checkuser",
            data:"empName="+empName,
            type:"POST",
            success:function (result) {

                if (result.code==100){
                    $("#empName_add_input").next("span").text("用户名可用");
                    $("#emp_save_btn").attr("ajax-va","success");
                }else{
                    $("#empName_add_input").next("span").text("用户名不可用");
                    $("#emp_save_btn").attr("ajax-va","error");
                }
            }
        })
    })
    //点击保存员工
    $("#emp_save_btn").click(function () {
        if (!validate_add_form()){

            return false;
        }
        if ($(this).attr("ajax-va")==="error"){

            return false;
        }
    //    1.模态框中填写的表单数据提交给服务器进行保存
    //     alert($("#empAddModal form").serialize());
    //    2.发送ajax请求
        $.ajax({
            url:"/emp",
            type:"POST",
            data:$("#empAddModal form").serialize(),
            success:function (result) {
                if (result.code=100){ //jsr303验证成功

                    $("#empAddModal").modal('hide');
                }else{
                    //验证失败
                    alert("失败");
                    //如果输入undefined 则证明没有错误信息
                    if(undefined != result.extend.errorFields.email){
                        //显示邮箱错误信息即可
                    }
                    if (undefined != result.extend.errorFileds.empName){
                        //显示员工名字的错误信息
                    }
                }
            }
        })
    })
    //点击修改
    $("#emp_update_btn").click(function () {
        if (!validate_add_form()){
            return false;
        }
        if ($(this).attr("ajax-va")==="error"){
            return false;
        }
        $.ajax({
            url:"/emp",
            type:"POST",
            data:$("#empAddModal form").serialize(),
            success:function (result) {
                if (result.code=100){ //jsr303验证成功
                    alert(result.msg);
                    $("#empAddModal").modal('hide');
                }else{
                    //验证失败
                    alert("失败");
                    //如果输入undefined 则证明没有错误信息
                    if(undefined != result.extend.errorFields.email){
                        //显示邮箱错误信息即可
                    }
                    if (undefined != result.extend.errorFileds.empName){
                        //显示员工名字的错误信息
                    }
                }
            }
        })
    })
function validate_add_form(){
    $("#empName_add_input").parent().removeClass("has-success has-error");
    $("#email_add_input").parent().removeClass("has-success has-error");
    //1.拿到要校验的数据
    var empName=$("#empName_add_input").val();

    var regName=/^[a-zA-Z0-9_-]{6,16}$/;
    if(!regName.test(empName)){
        alert("用户名异常");
        $("#empName_add_input").parent().addClass("has-error");
        $("#empName_add_input").next("span").text("用户名需要是6-16位");

        return false;
    }else{
        $("#empName_add_input").parent().addClass("has-success");
        $("#empName_add_input").next("span").text("");
    }
    //校验邮箱
    var email=$("#email_add_input").val();
    var regEmail=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
    if(!regEmail.test(email)){
        // alert("邮箱格式异常");
        //清空之前的样式
        $("#email_add_input").parent().addClass("has-error");
        $("#email_add_input").next("span").text("邮箱格式不正确");
        return false;
    }else{
        $("#email_add_input").parent().addClass("has-success");
        $("#email_add_input").next("span").text("");
    }
    return true;
}
    $(document).on("click",".edit_btn",function () {
    //    清空信息
        $("#empUpdateModal select").empty();
        //查询员工信息,显示员工信息
        $.ajax({
            url:"/depts",
            type:"GET",
            success:function (result) {
                // console.log(result);
                // 显示部门信息到下拉列表
                $.each(result.extend.depts,function () {
                    var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                    optionEle.appendTo($("#empUpdateModal select"));
                });
            }
        })
        //查出部门信息,显示部门列表
        getEmp($(this).attr("edit_id"));
        //弹出模态框
        $("#empUpdateModal").modal({
            backdrop: "static"
        })
    })
    function getEmp(id) {
        $.ajax({
            url:"/emp/"+id,
            type:"GET",
            success:function (result) {
             /*   console.log(result);*/
                var empData = result.extend.emp;
                $("#empName_update_static").text(empData.empName);
                $("#email_update_input").val(empData.email);
                $("#empUpdateModal input[name=gender]").val([empData.gender]);
                $("#empUpdateModal select").val([empData.dId]);
            }
        })
    }
</script>
</body>
</html>
